<!-- 申请 -->
<template>
	<view class="apply-container">
		<view class="apply-main">
			<view class="flex-start apply-main-title border">
				<image src="/static/images/tabbar-s.png" mode=""></image>
				<text>出入申请</text>
				
			</view>
			<view class="apply-main-li flex-start border">
				<text>访问类型</text>
				<input @click="show=true" type="text" v-model="type.label" value="" disabled placeholder-class="plac" placeholder="请选择访问类型"/>
				<u-select style='z-index: 99;' v-model="show" mode="single-column" :list="selectList" @confirm="confirm1"></u-select>
			</view>
			<!-- <view class="apply-main-li flex-start">
				<text>被访人所在的学院</text>
				<input type="text" value="" placeholder-class="plac" placeholder="请选择被访人所在的学院"/>
			</view> -->
			<view class="apply-main-li flex-start">
				<text>被访人学院名称</text>
				<input type="text" value="" @click="scShow=true" v-model="type1.label" placeholder-class="plac" disabled placeholder="请选择被访人所在学院名称"/>
				<u-select value-name="id" label-name="name" v-model="scShow" mode="single-column" :list="scList" @confirm="confirm4"></u-select>
			</view>
			<view class="apply-main-li flex-start">
				<text>被访人姓名</text>
				<input type="text" value="" v-model="base.forUserName" placeholder-class="plac" placeholder="请输入被访人姓名"/>
			</view>
			<view class="apply-main-li flex-start">
				<text>被访人电话</text>
				<input type="text" value="" maxlength="11" v-model="base.forUserPhone" placeholder-class="plac" placeholder="请输入被访人电话"/>
			</view>
			<!-- <view class="apply-main-li flex-start border">
				<text>申请名称</text>
				<input type="text" value="" v-model="base.applyName" placeholder-class="plac" placeholder="请输入申请名称" />
			</view> -->
			<view class="apply-main-li flex-start border">
				<text>进入校园时间</text>
				<input disabled @click="showTime=true" type="text" v-model="base.indateBegin" value="" placeholder-class="plac" placeholder="请选择出校时间"/>
				<u-picker mode="time" :show-time-tag="false" v-model="showTime" @confirm="confirm2"></u-picker>
			</view>
			<!-- <view class="apply-main-li flex-start border">
				<text>出入天数</text>
				<input type="text" value="" placeholder-class="plac" placeholder="请输入访问天数(小于100的正数）"/>
			</view> -->
			<view class="apply-main-li flex-start">
				<text>离开校园的时间</text>
				<input disabled @click="showTime1=true" type="text" v-model="base.indateEnd" value="" placeholder-class="plac" placeholder="请选择回校时间"/>
				<u-picker mode="time" :show-time-tag="false" v-model="showTime1" @confirm="confirm3"></u-picker>
			</view>
		</view>
		<view class="apply-main">
			<view class="flex-start apply-main-title border">
				<image src="/static/images/campu-8.png" mode=""></image>
				<text>申请理由</text>
			</view>
			<view class="apply-textarea">
				<textarea value="" v-model="base.applyReason" placeholder="请输入申请理由" />
				<view>{{base.applyReason.length}}/200</view>
			</view>
		</view>
		<view class="apply-main" v-if="showPhoto">
			<view class="flex-start apply-main-title border">
				<image src="/static/images/campu-9.png" mode=""></image>
				<text>出入申请</text>
			</view>
			<view class="apply-main-updata flex">
				<view class="apply-main-updata-right" @click="getImg(1,1)">
					<image :src="img1.url?img1.url:'/static/images/campu-5.png'" mode="aspectFill"></image>
					<view>上传身份证正面照</view>
				</view>
				<view class="apply-main-updata-right" @click="getImg(1,2)">
					<image :src="img2.url?img2.url:'/static/images/campu-7.png'" mode="aspectFill"></image>
					<view>上传身份证反面照</view>
				</view>
			</view>
			<view style="padding-top: 20rpx;">上传材料(健康码、核酸检测报告、行程卡)</view>
			<view class="apply-main-updata-list flex-wrap">
				<view class="apply-main-updata-list-li" v-for="(item,index) in base.attaches" :key="index" v-if="item.code == 3">
					<image class="del" src="/static/images/del.png" mode="" @click="del(item)"></image>
					<image :src="item.url" mode="aspectFill"></image>
				</view>
				<image src="/static/images/add-img.png" mode="" @click="getImg(1,3)"></image>
			</view>
		</view>
		<view class="apply-main" v-if="showPhoto">
			<view class="flex-start apply-main-title border">
				<image src="/static/images/tabbar-shen1.png" mode=""></image>
				<text>人脸识别</text>
			</view>
			<view class="apply-main-rela" @click="getImg(1,4)">
				<image :src="img3.url?img3.url:'/static/images/campu-6.png'" mode="aspectFill"></image>
				<view class="">
					上传人脸
				</view>
			</view>
		</view>
		<view class="apply-btn" @click="submit()">
			提交
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// params: {
				// 	year: true,
				// 	month: true,
				// 	day: true,
				// 	hour: true,
				// 	minute: true,
				// 	timestamp:true
				// },
				scList:[],
				show:false,
				maskData:'',
				scShow:false,
				showTime:false,
				showTime1:false,
				selectList: [{
						value: 1,
						label: '公务来访'
					},
					{
						value: 2,
						label: '私人来访'
					},
					{
						value: 3,
						label: '其它'
					}
				],
				type1:{},
				type:{},
				base :{
					visittype:null,
					applyName:'123',
					forDeptId:null,
					forDeptName:'',
					forUserPhone:'',
					indateBegin:'',
					indateEnd:'',
					applyReason:'',
					forUserName:'',
					attaches:[]
				},
				img1:{
					url:''
				},
				showPhoto:false,
				img2:{url:''},
				img3:{url:''},
				time1:null,
				time2:null
			}
		},
		watch:{
			scList(e){
				this.scList = e
			},
			'base.attaches'(e){
				console.log(e)
				e.forEach(item=>{
					if(item.code==1){
						this.img1 = item
					}else if(item.code==2){
						this.img2 = item
					}else if(item.code==4){
						this.img3 = item
					}
				})
			}
		},
		onLoad() {
			this.showPhoto = this.$db.get('showPhoto')
			let data = {
				parentId:this.$db.get('parentId')
			}
			this.$api.list({data:data}).then(res => {
				// console.log(res);
				this.scList = res.data
			}).catch(res=>{
				// console.log(res);
			})
		},
		methods: {
			getData(e) {
				console.log(e);
				//获取accessToken
				this.$u.mpShare = {
					title: '智能校园', // 默认为小程序名称，可自定义
					path: '', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
					// 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
					// 支持PNG及JPG，默认为当前页面的截图
					imageUrl: '' 
				}
			},
			del(item){
				// console.log(item)
				// console.log(this.base.attaches.indexOf(item.attachId))
				
				this.base.attaches.forEach((arr,index)=>{
					if(arr.attachId == item.attachId){
						this.base.attaches.splice(index, 1)
					}
				})
				// console.log(this.base.attaches)
			},
			
			// 访问类型
			confirm1(e) {
				this.type = e[0]
				this.base.visittype = e[0].value
			},
			confirm2(e) {//进校时间
				// 当前时间
				let newdata = new Date().toISOString().slice(0, 10) + ' ' + '00:00'
				let newD = new Date(newdata).getTime()
				// this.base.indateBegin 
				let date = e.year + '-' + e.month + '-' + e.day + ' ' + '00:00'
				// 
				let time = new Date(date).getTime()
				this.time1 = time
				console.log(Number(time),newD)
				if(Number(time) < Number(newD)){
					return this.showtoast('请重新选择进校时间','error')
				}
				this.base.indateBegin = date
			},
			confirm3(e) {//离开校时间
				
				
				let seleD  = e.year + '-' + e.month + '-' + e.day + ' ' + '23:59'
				let time = new Date(seleD).getTime()
				
				
				if(time < this.time1){
					return this.showtoast('请重新选择离开校园时间','error')
				}
				this.time2 = time
				this.base.indateEnd = seleD
			},
			confirm4(e){
				this.type1 = e[0]
				console.log(this.type1);
				this.base.forDeptId = e[0].value
				this.base.forDeptName = e[0].label
			},
			submit(){//提交数据
				let base = this.base
				if(!base.applyName){
					return this.showtoast('申请名称不能为空','error')
				}else if(!base.indateEnd){
					return this.showtoast('请选择出校时间','error')
				}else if(!base.indateBegin){
					return this.showtoast('请选择进校时间','error')
				}else if(!base.visittype){
					return this.showtoast('请选择进校类型','error')
				}else if(!base.applyReason){
					return this.showtoast('申请理由不能为空','error')
				}
				if(this.time2 < this.time1){
					return this.showtoast('请重新选择离开校园时间','error')
				}
				this.$api.outsiders({
					data: base
				}).then(res => {
					base.visittype=null,
					base.applyName='',
					base.forDeptId=null,
					base.forDeptName='',
					base.forUserPhone='',
					base.indateBegin='',
					base.indateEnd='',
					base.applyReason='',
					base.forUserName='',
					this.showtoast('申请提交成功!','success')
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.isonShow = true; //修改上一页data里面的tagIndex 参数值
					setTimeout(res=>{
						uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
							delta: 1
						});
					},1500)
					
				}).catch(res => {
					let err = ''
					if(res.data){
						err = res.data.data[0]
					}
					this.$uTips(res.data.message + err)
				})
			},
			showtoast(title,type){
				this.$refs.uTips.show({
					title: title,
					type: type,
					duration: '2300'
				}) 
			},
			getImg(num,code) {
				let _this = this
				uni.chooseImage({
					count: num || 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: code == 4?['camera']:['album', 'camera'], //从相册选择
					success: function(imgRes) {
						uni.uploadFile({
							url: 'https://xmcr.nngyun.cn/WisdomSchool/api/common/attach/upload',
							filePath: imgRes.tempFiles[0].path,
							name: 'files',
							formData: {
								code: code,
								file:imgRes.tempFiles[0].path
							},
							header:{
								'Authorization':_this.$db.get('authorization'),
							},
							success: result => {
								let dataBase = JSON.parse(result.data)
								if(_this.base.attaches.length == 0){
									// dataBase.data.attachId = ''
									_this.base.attaches.push(dataBase.data)
								}else{
									let a = ''
									_this.base.attaches.forEach((items,index)=>{
										if(Number(items.code) == code && code != 3){
											a = code
											items.url = dataBase.data.url
										}else if(_this.base.attaches.length - 1 == index){
											if(!a || code == 3){
												_this.base.attaches.push(dataBase.data)
											}
											// dataBase.data.attachId = ''
											console.log(_this.base.attaches)
										}else{
											console.log('123')
										}
									})
								}
								_this.showtoast('文件上传成功!','success')
								console.log(_this.base.attaches);
							}
						
						});
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	page,body{
		background-color: #F8F8F8;
	}
	.plac {
		color: #B1B1B1;
	}
	.apply-container {
		padding-bottom: 100rpx;
	}
	.apply-main {
		margin: 28rpx;
		overflow: hidden;
		padding: 0 32rpx;
		border-radius: 12rpx;
		background-color: white;
		.apply-main-title {
			padding: 28rpx 0;
			image {
				width: 28rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}
		.apply-main-li {
			padding: 30rpx 0;
			text {
				width: 228rpx;
				color: #797B87;
				display: block;
				font-size: 28rpx;
			}
			input {
				color: #B1B1B1;
				font-size: 28rpx;
			}
		}
		.apply-textarea {
			// height: 250rpx;
			padding: 22rpx 30rpx;
			border-radius: 12rpx;
			margin-bottom: 36rpx;
			background-color: #F3F3F3;
			textarea {
				width: 100%;
				height: 176rpx;
				font-size: 30rpx;
			}
			view {
				color: #B1B1B1;
				font-size: 28rpx;
				text-align: right;
			}
		}
	}
	.apply-main-updata-list {
		padding: 20rpx 0;
		image {
			width: 170rpx;
			height: 170rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
		.apply-main-updata-list-li {
			position: relative;
			.del{
				z-index: 10;
				position: absolute;
				right: -15rpx;
				top: -15rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		&::after{
			content: '';
			flex: 1;
		}
	}
	.apply-main-updata {
		border-bottom: 2rpx dashed #979797;
		.apply-main-updata-right {
			margin: 58rpx 0;
			
		}
		image {
			width: 264rpx;
			height: 164rpx;
			border-radius: 8rpx;
		}
		view {
			color: #797B87;
			font-size: 26rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	}
	
	.apply-main-rela {
		padding-bottom: 44rpx;
		image {
			width: 222rpx;
			height: 258rpx;
			display: block;
			margin: 0 auto;
			border-radius: 8rpx;
		}
		view {
			width: 360rpx;
			color: #4D7CFB;
			margin: 0 auto;
			padding: 26rpx 0;
			margin-top: 24rpx;
			text-align: center;
			border-radius: 100rpx;
			border: 2rpx solid #4D7CFB;
		}
	}
	
	.apply-btn {
		color: #fff;
		margin: 0 56rpx;
		padding: 26rpx 0;
		text-align: center;
		margin-bottom: 50rpx;
		border-radius: 100rpx;
		background-color: #4D7CFB;
	}
	.btns-s {
		color: #fff !important;
		width: 300rpx;
		margin: 50rpx auto;
		text-align: center;
		border-radius: 10rpx;
		padding: 10rpx 30rpx;
		background-color: #007AFF !important;;
	}
</style>
